<template>
  <h1>级联选择器</h1>
  <div class="title">单选-基本使用</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ values }}</span>
    <e-cascader :data="data" v-model="values"></e-cascader>
  </div>
  <div class="title" plain>单选-hover触发</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ value1 }}</span>
    <e-cascader :data="data" v-model="value1" trigger="hover"></e-cascader>
  </div>
  <div class="title">单选-自定义已选项</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ value2 }}</span>
    <e-cascader
      :data="formatData"
      v-model="value2"
      :render-format="format"
    ></e-cascader>
  </div>

  <div class="title">单选-disabled</div>

  <div style="width:400px">
    <span class="tip">您选择的value有：{{ values }}</span>
    <e-cascader :data="data" disabled v-model="values"></e-cascader>
  </div>

  <div class="title">单选-size,，默认default</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ values }}</span>
    <div style="display:flex;">
      <e-cascader size="large" :data="data" v-model="values" />
      <e-cascader size="default" :data="data" v-model="values" />
      <e-cascader size="small" :data="data" v-model="values" />
    </div>
  </div>

  <div class="title">单选-动态加载</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ value7 }}</span>
    <e-cascader :data="data2" :load-data="loadData" />
  </div>

  <div class="title">单选-搜索</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ values }}</span>
    <e-cascader :data="data" filterable v-model="values"></e-cascader>
  </div>

  <div class="title">单选-与tab组合</div>
  <div style="width: 400px">
    <span class="tip">您选择的value有：{{ values }}</span>
    <e-cascader
      :data="data3[this.tabIndex]"
      v-model="values"
      tabshow
      @on-tabs-index-change="tabsIndexChange"
      :tabSelect = "tabSelect"
    >
    </e-cascader>
  </div>


  <div class="title">多选-基本使用</div>
  <div style="width: 400px" key="a">
    <span class="tip">您选择的value有：{{ value3 }}</span>
    <e-mul-cascader
      clearable
      v-model="value3"
      :options="cityList1"
      @on-change-object="onChange"
    >
    </e-mul-cascader>
  </div>

  <div class="title">多选-搜索</div>
  <div style="width: 400px" key="aa">
    <span class="tip">您选择的value有：{{ value7 }}</span>
    <e-mul-cascader
      clearable
      filterable
      v-model="value7"
      :options="cityList1"
      @on-change-object="onChange"
    >
    </e-mul-cascader>
  </div>


  <div class="title">多选-显示所有选项</div>
  <div style="width: 400px" key="b">
    <span class="tip">您选择的value有：{{ value4 }}</span>
    <e-mul-cascader
      clearable
      v-model="value4"
      :options="cityList3"
      @on-change-object="onChange"
      show-checked-strategy="SHOW_ALL"
    >
    </e-mul-cascader>
  </div>
  <div class="title">多选-合并选择项</div>
  <div style="width: 400px" key="c">
    <span class="tip">您选择的value有：{{ value5 }}</span>
    <e-mul-cascader
      clearable
      size="large"
      v-model="value5"
      :options="cityList2"
      @on-change-object="onChange"
      show-checked-strategy="SHOW_PARENT"
    >
    </e-mul-cascader>
  </div>
  <div class="title">多选-设置最多显示的 tag 数量</div>
  <div style="width: 400px" key="c">
    <span class="tip">您选择的value有：{{ value6 }}</span>
    <e-mul-cascader
      clearable
      v-model="value6"
      :limited="3"
      colorTag="default"
      :options="cityList4"
      @on-change-object="onChange"
      trigger="hover"
    >
    </e-mul-cascader>
  </div>

  <div class="title">form表单集合</div>
  <div style="width:400px">
    <e-form :model="formMoel" :rules="ruleValidate">
      <e-form-item label="单选" prop="values9">
        <e-cascader :data="data" v-model="formMoel.values9"/>
      </e-form-item>
      <e-form-item label="多选" prop="values10">
        <e-mul-cascader
          clearable
          v-model="formMoel.values10"
          :options="cityList1"
          @on-change-object="onChange"
        >
        </e-mul-cascader>
      </e-form-item>
    </e-form>
  </div>

  <div>

  </div>
  <mark-down class="markdown-body"></mark-down>
</template>
<script>
import MarkDown from '../../docs/cascader.md'
const mock = [
  {
    value: 'jiangsu',
    label: '江苏',
    children: [
      {
        value: 'suzhou',
        label: '苏州',
        children: [
          {
            value: 'gaoxinqu',
            label: '高新区',
            children: [
              {
                value: 'dongzhu',
                label: '东渚',
              },
              {
                value: 'tongan',
                label: '通安',
              },
              {
                value: 'xuguan',
                label: '浒关',
              },
              {
                value: 'zhenhu',
                label: '镇湖',
              },
              {
                value: 'majian',
                label: '马涧',
              },
              {
                value: 'kejicheng',
                label: '科技城',
              },
              {
                value: 'hengtang',
                label: '横塘',
              },
              {
                value: 'shishan',
                label: '狮山',
              },
              {
                value: 'fengqiao',
                label: '枫桥',
              },
            ],
          },
          {
            value: 'wuzhongqu',
            label: '吴中区',
            disabled: true,
          },
          {
            value: 'gusuqu',
            label: '姑苏区',
          },
        ],
      },
      {
        value: 'wuxi',
        label: '无锡',
      },
    ],
  },
  {
    value: 'guizhou',
    label: '贵州',
    children: [
      {
        value: 'guiyang',
        label: '贵阳',
      },
      {
        value: 'tongren',
        label: '铜仁',
      },
      {
        value: 'kaili',
        label: '凯里',
      },
    ],
  },
  {
    value: 'zhejiang',
    label: '浙江',
    children: [
      {
        value: 'hangzhou',
        label: '杭州',
      },
      {
        value: 'wenzhou',
        label: '温州',
      },
      {
        value: 'anji',
        label: '安吉',
      },
    ],
  },
  // 验证空目录
  {
    value: 'taiwan',
    label: '台湾222222222222222222222222',
    children: [],
  },
]
export default {
  components: {
    MarkDown,
  },
  data () {
    const validateCheck = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('输入不能为空'))
      } else {
        callback()
      }
    };
    const validateCheck2 = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('输入不能为空'))
      } else {
        callback()
      }
    }
    return {
      tabSelect:['选项一','选项二','选项三'],
      tabIndex:0,
      values: [],
      value1: ['jiangsu', 'suzhou', 'shizilin'],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      // value6: [],
      formMoel:{
        values9: [],
        values10:[]
      },
      ruleValidate:{
        values9:[
          {
            required: true,
            // message: 'The name cannot be empty',
            trigger: 'change',
            validator: validateCheck
          },
        ],
        values10:[
          {
            required:true,
            trigger: 'change',
            validator: validateCheck2
          }
        ]
      },
      value6: [
        'taiwan',
        'zhejiang/wenzhou',
        'guizhou/tongren',
        'guizhou/kaili',
      ],
      // value6: ["zhejiang/wenzhou", "guizhou/tongren"],
      // value6: ["zhejiang/wenzhou", "guizhou/tongren", "guizhou/kaili"],
      value7: [],
      value8: [],
      data: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫',
            },
            {
              value: 'tiantan',
              label: '天坛',
            },
            {
              value: 'wangfujing',
              label: '王府井',
            },
          ],
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙',
                },
              ],
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园',
                  disabled: true,
                },
                {
                  value: 'shizilin',
                  label: '狮子林',
                },
              ],
            },
          ],
        },
      ],
      data2: [
        {
          value: 'beijing',
          label: '北京',
          children: [],
          loading: false,
        },
        {
          value: 'hangzhou',
          label: '杭州',
          children: [],
          loading: false,
        },
      ],
      data3: [
        [
          {
            value: 'beijing',
            label: '北京',
            children: [
              {
                value: 'gugong',
                label: '故宫',
              },
              {
                value: 'tiantan',
                label: '天坛',
              },
              {
                value: 'wangfujing',
                label: '王府井',
              },
            ],
          },
          {
            value: 'jiangsu',
            label: '江苏',
            children: [
              {
                value: 'nanjing',
                label: '南京',
                children: [
                  {
                    value: 'fuzimiao',
                    label: '夫子庙',
                  },
                ],
              },
              {
                value: 'suzhou',
                label: '苏州',
                children: [
                  {
                    value: 'zhuozhengyuan',
                    label: '拙政园',
                    disabled: true,
                  },
                  {
                    value: 'shizilin',
                    label: '狮子林',
                  },
                ],
              },
            ],
          },
        ],
        [
          {
            value: 'zhejiang',
            label: '浙江',
            children: [
              {
                value: 'hangzhou',
                label: '杭州',
                children: [
                  {
                    value: 'xihu',
                    label: '西湖',
                    code: 310000,
                  },
                ],
              },
            ],
          },
          {
            value: 'jiangsu',
            label: '江苏',
            children: [
              {
                value: 'nanjing',
                label: '南京',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: '中华门',
                    code: 210000,
                  },
                ],
              },
            ],
          },
        ],
        [
          {
            value: 'zhejiang',
            label: '浙江',
          }
        ],
      ],
      formatData: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖',
                  code: 310000,
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'zhonghuamen',
                  label: '中华门',
                  code: 210000,
                },
              ],
            },
          ],
        },
      ],
      cityList1: JSON.parse(JSON.stringify(mock)),
      cityList2: JSON.parse(JSON.stringify(mock)),
      cityList3: JSON.parse(JSON.stringify(mock)),
      cityList4: JSON.parse(JSON.stringify(mock)),
    }
  },
  watch: {
    value6(val) {
      // console.log("value6", val);
    },
  },
  methods: {
    tabsIndexChange(index){
      this.tabIndex = index
    },
    format(labels, selectedData) {
      console.log(labels, selectedData)
      const index = labels.length - 1
      const data = selectedData[index] || false
      if (data && data.code) {
        return labels[index] + ' - ' + data.code
      }
      return labels[index]
    },
    onChange(option) {
      // this.$Message.info(JSON.stringify(option))
      console.log(JSON.stringify(option))
    },
    loadData(item, callback) {
      item.loading = true
      setTimeout(() => {
        if (item.value === 'beijing') {
          item.children = [
            {
              value: 'csdn',
              label: 'CSDN',
            },
            {
              value: 'baidu',
              label: '百度',
            },
            {
              value: 'sina',
              label: '新浪',
            },
          ]
        } else if (item.value === 'hangzhou') {
          item.children = [
            {
              value: 'ali',
              label: '阿里巴巴',
            },
            {
              value: '163',
              label: '网易',
            },
          ]
        }
        item.loading = false
        callback()
      }, 1000)
    },
  },
  mounted() {
    // setTimeout(() => (this.values = ['jiangsu/suzhou']), 1000)
    // setTimeout(() => (this.value6 = ['guizhou', 'taiwan']), 1000)
  },
}
</script>
<style lang="less" scoped>
.title {
  display: block;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  line-height: 1.5;
  &:not(:first-child) {
    margin-top: 40px;
  }
}
.tip {
  color: #888;
  display: block;
  margin-bottom: 10px;
}
.markdown-body {
  margin-top: 40px;
}
</style>
